<template>
	<view class="price-box">
		<scroll-view class="scroll-price" scroll-x="true">
			<view class="scroll-price_item" :class="index == current ?'action':''" v-for="index in 14" :key="index"
				@click="change(index)">
				<view class="scroll-price_item_week">
					(周一)
				</view>
				<view class="scroll-price_item_date">
					07-15
				</view>
				<view class="scroll-price_item_price">
					1880
				</view>
				<view class="scroll-price_item_tag" v-if="index < 3">
					古尔邦节
				</view>
				<view class="scroll-price_item_status" :class="index == 1 ? 'full':'plenty'">
					{{index == 1 ? '名额已满':'数量充足'}}
				</view>
			</view>

		</scroll-view>
		<view class="more">
			<view class="more_text">
				<rui-icon icon="calendar" size="40" color="#f00"></rui-icon>
				<view>查看</view>
				<view>更多</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref
	} from "vue"

	let current = ref(3)
	const change = (index) => {
		current.value = index
	}
</script>

<style lang="scss" scoped>
	.price-box {
		display: flex;
		justify-content: space-between;

		.more {
			height: 195rpx;
			width: 100rpx;
			display: flex;
			background: #f5f6f7;
			justify-content: center;
			align-items: center;

			&_text {
				padding: 20rpx;
				text-align: center;
				font-size: 20rpx;
				color: #999
			}
		}

		.scroll-price {
			white-space: nowrap;
			width: calc(100% - 100rpx);
			height: 200rpx;
			scrollbar-width: none;
			position: relative;

			.action {
				background: #fff9f9 !important;
				border: 1rpx solid #f30 !important;
			}

			&_item {
				display: inline-block;
				margin: 5rpx;
				padding: 40rpx;
				border-radius: 10rpx;
				border: 1rpx solid #f3f4f5;
				text-align: center;
				color: #333;
				position: relative;

				.plenty {
					background: #ffeaea;
					color: #f30;
				}

				.full {
					background: #eee;
					color: #999;
				}

				.full {
					background: #eee;
					color: #999;
				}

				&_status {
					position: absolute;
					bottom: 0;
					left: 0;
					font-size: 20rpx;

					width: 100%;
					border-bottom-left-radius: 10rpx;
					border-bottom-right-radius: 10rpx;
					padding: 5rpx 0;
				}

				&_tag {
					position: absolute;
					top: 0;
					left: 0;
					font-size: 20rpx;
					background: #ffeaea;
					color: #f30;
					border-top-left-radius: 10rpx;
					border-bottom-right-radius: 10rpx;
					padding: 0 10rpx;
				}

				&_week {
					font-size: 20rpx;
					color: #999;
				}

				&_date {
					font-weight: bold;
				}

				&_price {
					color: #f00;
					display: flex;
					font-size: 24rpx;
					justify-content: center;

					&::before {
						content: "￥";
					}
				}
			}
		}
	}
</style>